<template>
  <div class="hello">
    <h1>{{msg}}</h1>
<draggable v-model="myTeachers" group="people" @start="drag=true" @end="drag=false" class="drag-box ">
   <div v-for="element in myTeachers" :key="element.name+element.id">{{element.name}}</div>
</draggable>
<draggable v-model="myStudent" group="people" @start="drag=true" @end="drag=false" class="drag-box ">
   <div v-for="element in myStudent" :key="element.name+element.id">{{element.name}}</div>
</draggable>

<button type="buttton" @click='getAllData'>最新数据</button>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components:{
    draggable
  },
  data(){
    return {
      drag:false,
      myTeachers:[{
        id:'1',
        name:'Laney'
      },{
        id:'2',
        name:'Alice'
      },
      {
        id:'3',
        name:'Tom'
      }],

      myStudent:[{
        id:'1',
        name:'song1'
      },{
        id:'2',
        name:'song2'
      },
      {
        id:'3',
        name:'song3'
      }]
    }
  },
  methods:{
    getAllData(){
      console.log(this.myTeachers);
      console.log(this.myStudent);
    }
  }
}
</script>

<style scoped>
.drag-box {
  border: 1px solid #000;
  text-align: left;
  line-height: 35px;
  width: 300px;
  margin: 10px auto;
  min-height: 100px;
}
.drag-box span {
  display: block;
  border-bottom: 1px dashed #ccc;
  padding-left: 10px;
  cursor: pointer;
}
</style>
